<form [formGroup]="userForm" (keypress)="enter($event)">
  <div class="form-group row">
    <label for="password" class="col-3 col-form-label text-right">原密码</label>
    <div class="col-7">
      <input type="password" class="form-control form-control-sm" formControlName="password"
             id="password">
      <small [ngClass]="{'normal': oldPasswordhint.length!=12,'normal-danger': oldPasswordhint.length==12}" class="form-text text-muted">{{oldPasswordhint}}</small>
    </div>
  </div>
  <div formGroupName="passwordGroup">
    <div class="form-group row">
      <label for="newPassword" class="col-3 col-form-label text-right">新密码</label>
      <div class="col-7">
        <input type="password" class="form-control form-control-sm" (ngModelChange)="checkLength($event)"
               formControlName="newPassword"
               id="newPassword"
               placeholder="密码">
        <small [ngClass]="{'normal': passwordhint.length!=10,'normal-danger': passwordhint.length==10}">
          {{passwordhint}}
        </small>
      </div>
    </div>
    <div class="form-group row">
      <label for="newPasswordCheck" class="col-3 col-form-label text-right">确认新密码</label>
      <div class="col-7">
        <input type="password" class="form-control form-control-sm" formControlName="newPasswordCheck"
               id="newPasswordCheck"
               placeholder="密码">
        <small class="form-text text-muted">请重复输入您的密码</small>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-12 text-center">
      <button class="btn btn-sm btn-teal w-50" [disabled]="!userForm.valid" (click)="changePassword()">
        修改密码
      </button>
    </div>
  </div>
</form>
